<template>
  <div ref="containerRef" style="width: 100%; height: 100%"></div>
  <iframe
    src="./model/index-plush.html"
    frameborder="0"
    @load="onLoad"
    ref="iframeRef"
    v-if="open"
    style="opacity: 0"
  ></iframe>
</template>
<script setup>
import { ref, nextTick } from 'vue'

import '@kitware/vtk.js/Rendering/Profiles/Geometry'

// Enable data soure for DataAccessHelper
import '@kitware/vtk.js/IO/Core/DataAccessHelper/LiteHttpDataAccessHelper' // Just need HTTP
// import '@kitware/vtk.js/IO/Core/DataAccessHelper/HttpDataAccessHelper'; // HTTP + zip
// import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper'; // html + base64 + zip
// import '@kitware/vtk.js/IO/Core/DataAccessHelper/JSZipDataAccessHelper'; // zip

import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow'
import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor'
import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper'
import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource'
import vtkTexture from '@kitware/vtk.js/Rendering/Core/Texture'
import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract'
import vtkResourceLoader from '@kitware/vtk.js/IO/Core/ResourceLoader'
import vtkGLTFImporter from '@kitware/vtk.js/IO/Geometry/GLTFImporter'
import vtkImageMapper from '@kitware/vtk.js/Rendering/Core/ImageMapper'
import vtkImageSlice from '@kitware/vtk.js/Rendering/Core/ImageSlice'

let open = ref(true)
let iframeRef = ref()
let containerRef = ref()
function onLoad() {
  window.addEventListener('message', async event => {
    try {
      let url = event?.data?.gltf
      let error = event?.data?.error
      if (error) {
        throw error
      }
      if (url) {
        // let url
        // if (content instanceof ArrayBuffer) {
        //   url = createURLFromArrayBuffer(content)
        // } else {
        //   url = createURLFromString(JSON.stringify(content, null, 2))
        //   // const link = document.createElement('a')
        //   // link.style.display = 'none'
        //   // document.body.appendChild(link) // Firefox workaround, see #6594
        //   // link.href = url
        //   // link.download = 'scene.glb'
        //   // link.click()
        // }
        await render(url)
        open.value = false
      }
    } catch (e) {
      console.log(e)
    }
  })
  iframeRef.value.contentWindow.postMessage('/test-file/imported.step')
}

async function render(url) {
  await nextTick()
  let fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
    container: containerRef.value,
  })

  let renderer = fullScreenRenderer.getRenderer()
  let renderWindow = fullScreenRenderer.getRenderWindow()
  let reader = vtkGLTFImporter.newInstance({
    renderer,
  })

  await vtkResourceLoader.loadScript('./model/draco_decoder_gltf_nodejs.js')
  reader.setDracoDecoder(DracoDecoderModule)

  await reader.setUrl(url, { binary: true })
  await new Promise(resolve => {
    reader.onReady(() => {
      reader.importActors()
      reader.importCameras()
      reader.importLights()
      reader.importAnimations()
      // renderer.resetCamera()
      // renderWindow.render()
      resolve()
    })
  })

  let imageActorI = vtkImageSlice.newInstance()
  let imageActorJ = vtkImageSlice.newInstance()
  let imageActorK = vtkImageSlice.newInstance()

  renderer.addActor(imageActorK)
  renderer.addActor(imageActorJ)
  renderer.addActor(imageActorI)
  console.log(reader)
  const data = reader.getOutputData()
  const dataRange = data.getPointData().getScalars().getRange()
  const extent = data.getExtent()

  const imageMapperK = vtkImageMapper.newInstance()
  imageMapperK.setInputData(data)
  imageMapperK.setKSlice(30)
  imageActorK.setMapper(imageMapperK)

  const imageMapperJ = vtkImageMapper.newInstance()
  imageMapperJ.setInputData(data)
  imageMapperJ.setJSlice(30)
  imageActorJ.setMapper(imageMapperJ)

  const imageMapperI = vtkImageMapper.newInstance()
  imageMapperI.setInputData(data)
  imageMapperI.setISlice(30)
  imageActorI.setMapper(imageMapperI)

  renderer.resetCamera()
  renderer.resetCameraClippingRange()
  renderWindow.render()
  console.log(123)
}
</script>
